<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>我的银行卡</title>
		<link rel="icon" href="img/favicon.ico" type="image/x-icon">
		<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>

	<body class="bg_ff">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我的银行卡</h1>
		</header>
		<div class="mui-content bg_ff">
			<div class="mui-content">
				<ul id="OA_task_1" class="mui-table-view bank">
					<li class="mui-table-view-cell">
						<div class="mui-slider-right mui-disabled">
							<a class="mui-btn mui-btn-red"><img class="dell-bank" src="img/ic_delete_bank.png"/></a>
						</div>
						<div class="mui-slider-handle">
							<dl class="clearfix">
								<dt class="left width20"><img class="icon_bank" src="img/gs.png"/></dt>
								<dd class="left width80 ">
									<h4 class="color_ff font_17">中国工商银行</h4>
									<p class="color_ff mg_top5">储蓄卡</p>
								</dd>
							</dl>
							<p class="color_ff mg_top10">****  ****  ****  1234</p>
						</div>
					</li>
					<li class="mui-table-view-cell">
						<div class="mui-slider-right mui-disabled">
							<a class="mui-btn mui-btn-red"><img class="dell-bank" src="img/ic_delete_bank.png"/></a>
						</div>
						<div class="mui-slider-handle">
							<dl class="clearfix">
								<dt class="left width20"><img class="icon_bank" src="img/gs.png"/></dt>
								<dd class="left width80 ">
									<h4 class="color_ff font_17">中国工商银行</h4>
									<p class="color_ff mg_top5">储蓄卡</p>
								</dd>
							</dl>
							<p class="color_ff mg_top10">****  ****  ****  1234</p>
						</div>
					</li>
					<li class="mui-table-view-cell">
						<div class="mui-slider-right mui-disabled">
							<a class="mui-btn mui-btn-red"><img class="dell-bank" src="img/ic_delete_bank.png"/></a>
						</div>
						<div class="mui-slider-handle">
							<dl class="clearfix">
								<dt class="left width20"><img class="icon_bank" src="img/gs.png"/></dt>
								<dd class="left width80 ">
									<h4 class="color_ff font_17">中国工商银行</h4>
									<p class="color_ff mg_top5">储蓄卡</p>
								</dd>
							</dl>
							<p class="color_ff mg_top10">****  ****  ****  1234</p>
						</div>
					</li>

				</ul>
			</div>
		</div>
	</body>
	<script>
		mui.init();
		(function($) {

			$('#OA_task_1').on('tap', '.mui-btn', function(event) {
				var elem = this;
				var li = elem.parentNode.parentNode;
				mui.confirm('<div class="text"><p class="icon-information"></p><h5>确定删除此条消息？</h5></div>',  btnArray, function(e) {
					if(e.index == 0) {
						li.parentNode.removeChild(li);
					} else {
						setTimeout(function() {
							$.swipeoutClose(li);
						}, 0);
					}
				});
			});
			var btnArray = ['取消', '确认'];

		})(mui);
	</script>

</html>